.Mask {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

.MapA01 {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;

	.HelmetPosition {
		width: 1px;
		height: 1px;
		position: relative;
		z-index: 1;

		& > img {
			position: absolute;
			left: -25px;
			bottom: 0px;
			width: 50px;
			height: 65px;
		}

		& > div {
			position: absolute;
			left: 0;
			bottom: 70px;
			transform: translateX(-50%);
			font-size: 18px;
			font-family: ShuHeiTi;
			font-weight: bold;
			color: #f2f2f2;
			text-shadow: -2px 0 #262626, 0 2px #262626, 2px 0 #262626, 0 -2px #262626;
		}
	}
}

.MapA02 {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: relative;
	z-index: 1;

	& > .Map {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 1;
	}

	& > .FilesList {
		position: absolute;
		left: 240px;
		bottom: 140px;
		width: calc(100% - 480px);
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;

		& > div {
			padding: 8px 40px;
			font-size: 16px;
			font-family: MicrosoftYaHei;
			font-weight: bold;
			color: #ffffff;
			position: relative;
			z-index: 1;
			cursor: pointer;
			margin-bottom: 16px;
			user-select: none;

			&::after {
				position: absolute;
				content: "";
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				transform: skewX(-30deg);
				background: linear-gradient(
					0deg,
					rgba(1, 115, 132, 1),
					rgba(17, 45, 89, 1)
				);
				z-index: -1;
				border: 1px solid #3babe5;
			}

			&.active {
				z-index: 2;

				&::after {
					border: 1px solid #ffea64;
					background: linear-gradient(
						0deg,
						rgba(221, 108, 47, 1),
						rgba(17, 39, 59, 1)
					);
				}
			}
		}

		.AllObj {
			position: absolute;
			left: calc(50% - 100px);
			bottom: -64px;
			width: 200px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	& > .VideoList {
		position: absolute;
		right: 16px;
		top: 200px;
		width: 400px;
		bottom: 80px;
		z-index: 6;
	}

	& > .DbIdData {
		position: absolute;
		left: 16px;
		top: 200px;
		width: 480px;
		bottom: 80px;
		z-index: 6;
		overflow: hidden;

		.children {
			height: calc(100% - 40px);
			overflow-y: scroll;
		}

		.DbIdData_box {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 8px 16px;

			& > .DbIdData_name {
				font-family: MicrosoftYaHei, MicrosoftYaHei;
				font-weight: bold;
				font-size: 18px;
				color: #ffeb64;
				margin-bottom: 4px;
			}

			& > .DbIdData_data {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				border: 1px solid rgba(156, 254, 255, 1);
				border-radius: 6px;

				& > div {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					& > div {
						height: 32px;
						width: 100%;
						border-bottom: 1px solid rgba(156, 254, 255, 1);
						font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
						font-weight: bold;
						font-size: 14px;
						color: #ffffff;
						display: flex;
						align-items: center;
						padding: 4px 8px;

						&:last-child {
							border-bottom: none;
						}
					}

					&.DbIdData_label {
						width: 160px;
						border-right: 1px solid rgba(156, 254, 255, 1);
						display: flex;
						align-items: center;
						justify-content: center;

						& > div {
							justify-content: flex-end;
						}
					}

					&.DbIdData_value {
						flex: 1;
					}
				}
			}
		}
	}
}

.MapA03 {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: relative;
	z-index: 1;

	& > .Map {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 1;
	}

	& > .ItemTitle {
		position: absolute;
		right: 16px;
		top: 200px;
		width: 640px;
		height: auto;
		z-index: 6;

		.MapList {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 16px;

			& > div:first-child {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 16px;
				padding: 16px;
				background: rgba(19, 39, 61, 1);

				& > span {
					color: #fe6a46;
					font-size: 56px;
				}

				& > div:nth-child(2) {
					font-size: 18px;
					font-family: MicrosoftYaHeiSemibold;
					color: #ffffff;
					margin: 0 32px;
				}

				& > div:nth-child(3) {
					font-size: 40px;
					font-family: MicrosoftYaHeiSemibold;
					color: #ffffff;
				}
			}
		}
	}

	.MapA03DIV {
		height: 115px;
		position: relative;
		z-index: 1;

		&::after {
			position: absolute;
			content: "";
			left: -4px;
			bottom: -4px;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: red;
		}

		& > img {
			width: 134px;
			height: 115px;
			position: absolute;
			left: -66px;
			bottom: -26px;
		}

		& > div {
			position: absolute;
			left: 0;
			bottom: 0;
			background: rgba(201, 0, 0, 0.5);
			border: 2px solid #ffffff;
			z-index: -1;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 8px 32px;

			& > div {
				font-size: 16px;
				font-family: ShuHeiTi;
				font-weight: bold;
				color: #ffeb63;
				line-height: 24px;
				text-shadow: 0 0 5px #262626;

				white-space: nowrap;
			}
		}
	}
}

.MapA04 {
	width: 100vw;
	height: 100vh;
	position: relative;
	z-index: 1;

	& > .Nav {
		position: absolute;
		left: 0;
		top: 148px;
		width: 100vw;
		height: 54px;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 6;

		& > .NavBox {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			background: rgba(25, 61, 99, 1);
			border-radius: 50px;
			overflow: hidden;

			& > div {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				padding: 0 64px;
				font-size: 14px;
				font-family: ShuHeiTi;
				font-weight: bold;
				color: #affdf5;
				border-radius: 50px;
				cursor: pointer;

				&.active {
					color: white;
					background: linear-gradient(
						0deg,
						rgba(221, 108, 47, 1),
						rgba(17, 39, 59, 1)
					);
					border: 1px solid rgba(255, 234, 100, 1);
				}
			}
		}
	}

	& > .Box {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;

		& > div {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 1;

			& > img {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: -1;
			}

			& > .Left {
				position: absolute;
				left: 16px;
				top: 148px;
				bottom: 40px;
				width: 340px;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				z-index: 1;

				.B471Box {
					width: 100%;
					height: 100%;
					padding: 16px;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					flex-direction: column;
					overflow: hidden;

					& > div:last-child {
						flex: 1;
						width: 100%;
						overflow: hidden;
					}

					& > .MapList {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;

						& > div:first-child {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-bottom: 16px;
							padding: 16px;
							background: rgba(19, 39, 61, 1);

							& > span {
								color: #fe6a46;
								font-size: 56px;
							}

							& > div:nth-child(2) {
								font-size: 18px;
								font-family: MicrosoftYaHeiSemibold;
								color: #ffffff;
								margin: 0 32px;
							}

							& > div:nth-child(3) {
								font-size: 40px;
								font-family: MicrosoftYaHeiSemibold;
								color: #ffffff;
							}
						}
					}
				}

				.B472Box {
					width: 100%;
					height: 100%;
					padding: 16px;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					& > div {
						flex: 1;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						margin: 8px 0;
						background: rgba(19, 39, 61, 1);

						& > span {
							color: #00d3fa;
							font-size: 40px;
						}

						& > div:nth-child(2) {
							font-size: 16px;
							font-family: MicrosoftYaHeiSemibold;
							color: #ffffff;
							margin: 8px 0;
						}

						& > div:nth-child(3) {
							font-size: 30px;
							font-family: MicrosoftYaHeiSemibold;
							color: #ffeb63;
						}
					}
				}
			}

			& > .Right {
				position: absolute;
				right: 16px;
				top: 148px;
				bottom: 40px;
				width: 340px;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				z-index: 1;
			}

			.Item {
				width: 100%;
				height: 100%;
				padding: 16px;
			}
		}

		& > .vidoe {
			padding: 220px 24px 24px;
		}
	}
}

.MapA05,
.MapA06 {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;

	& > .Map {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	& > .MapA05__Options {
		position: absolute;
		left: 16px;
		top: 200px;
		width: 400px;
		bottom: 48px;
		background: rgba(0, 0, 0, 0.35);
		backdrop-filter: blur(10px);
		z-index: 2;
		padding: 16px;
		border-radius: 6px;
		color: white;
	}
}

.BeiHuanBMap {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;

	& > .Map {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		overflow: hidden;
	}

	& > .options {
		position: absolute;
		z-index: 2;
		left: 0;
		bottom: 45px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.BeiHuanAdaqiao {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
